<template>
    <div>
        <smart-dialog v-model="dialog1">
            <template #header>
                <strong>标准盒模型布局</strong>
                <span>这是个子标题</span>
            </template>

            <template #body>
                <div style="height: 320px" class="bg-light-success">1231231</div>
            </template>
        </smart-dialog>

        <el-button @click="()=>{dialog1=true}">标准模态窗口</el-button>

        <smart-dialog v-model="dialog2" style="height: 560px">
            <template #header>
                <strong>带滚动条的布局</strong>
            </template>

            <template #body>
                <div class="scroll" style="height: 100%">
                    <div style="height: 960px" class="bg-light-success">1231231</div>
                </div>
            </template>
        </smart-dialog>

        <el-button @click="()=>{dialog2=true}">带滚动条的窗口</el-button>

        <smart-dialog v-model="dialog3" style="height: 560px">
            <template #header>
                <strong>包含更多按钮</strong>
            </template>

            <template #body>
                <div class="scroll" style="height: 100%">
                    <div style="height: 960px" class="bg-light-success">1231231</div>
                </div>
            </template>

            <template #footer="{close}">
                <div class="pull-right">
                    <el-button @click="close">关闭</el-button>
                    <el-button @click="">重置</el-button>
                    <el-button type="primary" @click="">提交</el-button>
                </div>
            </template>
        </smart-dialog>

        <el-button @click="()=>{dialog3=true}">包含更多按钮</el-button>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import SmartDialog from "@/widget/layer/smart-dialog.vue";

const dialog1 = ref(false);
const dialog2 = ref(false);
const dialog3 = ref(false);
const dialog4 = ref(false);

</script>

<style lang="scss">
</style>